﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="wbfrm_Login.aspx.cs" Inherits="FrontEndPlus.wbfrm_Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html id="Html1" xmlns="http://www.w3.org/1999/xhtml" runat="server">
<head id="Head1" runat="server">
    <title>Gimnasio Plus 360</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="Expand, contract, animate forms with jQuery wihtout leaving the page" />
    <meta name="keywords" content="expand, form, css3, jquery, animate, width, height, adapt, unobtrusive javascript" />

    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="App_Themes/CSS/Login.css"/>
    <link rel="stylesheet" type="text/css" href="App_Themes/CSS/Smoke.css"/>
    <link type="text/css" rel="stylesheet" href="App_Themes/CSS/formEspera.css" />

    <script type="text/javascript" src="JS/cufon-yui.js"></script>
    <script type="text/javascript" src="JS/ChunkFive_400.font.js"></script>
    <script type="text/javascript" src="JS/Smoke.min.js"></script>
    <script type="text/javascript" src="JS/Smoke.js"></script>

    <script type="text/javascript">
        Cufon.replace('h1', { textShadow: '1px 1px #fff' });
        Cufon.replace('h2', { textShadow: '1px 1px #fff' });
        Cufon.replace('h3', { textShadow: '1px 1px #000' });
        Cufon.replace('.back');
    </script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function ShowProgress() {
            setTimeout(function () {
                var modal = $('<div />');
                modal.addClass("modal");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({ top: top, left: left });
            }, 200);
        }
        $('form').live("submit", function () {
            ShowProgress();
        });
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <asp:Button ID="btnSubmit" runat="server" Text="Load Customers" OnClick="btnSubmit_Click" Height="0px" Width="0px"/>
        </form>
<div id="oculto" class="loading" align="center">
    <br />
    Cargando....<br />
    <img src="../../App_Themes/Resources/cargando.gif" alt="" />
</div>
    <div class="wrapper">
        <h1>Gimnasio Plus 360</h1>
        <br />
        <br />

        <div id="dog2">
            <img src="../App_Themes/Resources/Logo.png" />
        </div>

        <div class="content">
            <div id="form_wrapper" class="form_wrapper">

                <form class="register">
                    <h3>Registro (Solo clientes)</h3>
                    <div class="column">
                        <div>
                            <label>Nombre:(*)</label>
                            <input id="txt_Nombre_Registro" type="text" maxlength="50" onkeypress="return soloLetras(event);"/>
                            <span class="error">Error</span>
                        </div>
                        <div>
                            <label>Cedula: (Su usuario)(*)</label>
                            <input id="txt_Cedula_Registro" type="text" maxlength="15" /> <%--onkeypress="return soloNumeros(event);"--%>
                            <span class="error">Error</span>
                        </div>
                        <div>
                            <label>Telefono:(*)</label>
                            <input id="txt_Telefono_Registro" type="text" maxlength="8" onkeypress="return soloNumeros(event);" />
                            <span class="error">Error</span>
                        </div>
                    </div>
                    <div class="column">
                        <div>
                            <label>Contraseña:</label>
                            <input id="txt_Contrasena_Registro" type="password" maxlength="15" />
                            <span class="error">Error</span>
                        </div>
                        <div>
                            <label>Repetir Contraseña:</label>
                            <input id="txt_Repetir_Contrasena_Registro" type="password" maxlength="15" />
                            <span class="error">Error</span>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="remember">
                            <input id="cb_Envio_Notificaciones" type="checkbox" />
                            <span>Enviarme actualizaciones</span>
                        </div>
                        <input type="submit" value="Registrar" id="btn_Ingresar_Usuario" runat="server" onclick="RegistrarUsuario();" />
                        <a href="index.html" rel="login" class="linkform">Ya se encuentra registrado? Inicie Sesion aqui</a>
                        <div class="clear"></div>
                    </div>
                </form>

                <form class="login active">
                    <h3>Inicio</h3>
                    <div>
                        <label>Usuario:</label>
                        <input id="txt_Usuario" type="text" maxlength="15" style="text-transform: uppercase;" onblur="javascript:this.value=this.value.toUpperCase();" />
                        <span class="error">Error</span>
                    </div>
                    <div>
                        <label>Contraseña: <a href="olvido_Contrasena.html" rel="forgot_password" class="forgot linkform">Olvido su contraseña?</a></label>
                        <input id="txt_Password" type="password" maxlength="15" />
                        <span class="error">Error</span>
                    </div>
                    <div class="bottom">
                        <div class="remember">
                            <input id="cb_Mantenerse_Conectado" type="checkbox" /><span>Mantenerme conectado</span>
                        </div>
                        <input id="btn_Aceptar" type="submit" value="Login" runat="server" onclick="IniciarSesion();" />
                        <a href="registro.html" rel="register" class="linkform">Todavia no tiene cuenta? Registrece aquí</a>
                        <div class="clear"></div>
                    </div>
                </form>

                <form class="forgot_password">
                    <h3>Olvido su Contrasena</h3>
                    <div>
                        <label>Usuario:</label>
                        <input id="txt_Usuario_Recuperacion" maxlength="15" type="text" style="text-transform: uppercase;" onblur="javascript:this.value=this.value.toUpperCase();" />
                        <span class="error">Error</span>
                    </div>
                    <div class="bottom">
                        <input id="btn_Enviar_Contrasena" type="submit" value="Enviar Contraseña" runat="server" onclick="recuperacionContrasena();"  />
                        <input id="btn_Solicitar_Desbloqueo" type="submit" value="Solicitar desbloqueo" runat="server" onclick="solicitudDesbloqueo();" />
                        <a href="index.html" rel="login" class="linkform">Recordo su contraseña? Inicie Sesion aqui</a>
                        <a href="registro.html" rel="register" class="linkform">Todavia no tiene cuenta? Registrece aquí</a>
                        <div class="clear"></div>
                    </div>
                </form>

            </div>

            <div class="clear"></div>

        </div>
    </div>
    <!-- The JavaScript -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $form_wrapper = $('#form_wrapper'),
                $currentForm = $form_wrapper.children('form.active'),
                $linkform = $form_wrapper.find('.linkform');

            $form_wrapper.children('form').each(function (i) {
                var $theForm = $(this);
                if (!$theForm.hasClass('active'))
                    $theForm.hide();
                $theForm.data({
                    width: $theForm.width(),
                    height: $theForm.height()
                });
            });

            setWrapperWidth();

            $linkform.bind('click', function (e) {
                var $link = $(this);
                var target = $link.attr('rel');
                $currentForm.fadeOut(400, function () {
                    $currentForm.removeClass('active');
                    $currentForm = $form_wrapper.children('form.' + target);
                    $form_wrapper.stop()
                                 .animate({
                                     width: $currentForm.data('width') + 'px',
                                     height: $currentForm.data('height') + 'px'
                                 }, 500, function () {
                                     $currentForm.addClass('active');
                                     $currentForm.fadeIn(400);
                                 });
                });
                e.preventDefault();
            });

            function setWrapperWidth() {
                $form_wrapper.css({
                    width: $currentForm.data('width') + 'px',
                    height: $currentForm.data('height') + 'px'
                });
            }
            $form_wrapper.find('input[type="submit"]')
                         .click(function (e) {
                             e.preventDefault();
                         });
        });

        function IniciarSesion() {
            ShowProgress();
            var usuario = $('#txt_Usuario').val();
            var pass = $('#txt_Password').val();
            var parametro = { 'usuario': usuario, 'pass': pass, 'mantenerseActivo': cb_Mantenerse_Conectado.checked };
            var strParametro = JSON.stringify(parametro);
            

            $.ajax({
                type: "POST",
                url: "wbfrm_Login_Aux.aspx/iniciarSesion",
                data: strParametro,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                success: function (res) {
                    if (res.d == "Bienvenido") {
                        window.location = "wbfrm_Index.aspx";
                    }
                    else {
                        smoke.alert(res.d, function (e) {

                        }, {
                            ok: "OK",
                            classname: "custom-class"
                        });
                        var boton = document.getElementById('btnSubmit');
                        boton.click();
                    }

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus + ": " + XMLHttpRequest.responseText);
                }
            });
        }

        function RegistrarUsuario() {
            ShowProgress();
            var nombre = $('#txt_Nombre_Registro').val();
            var cedula = $('#txt_Cedula_Registro').val();
            var telefono = $('#txt_Telefono_Registro').val();
            //var email = $('#txt_Email_Registro').val();
            var contrasena = $('#txt_Contrasena_Registro').val();
            var repetirContrasena = $('#txt_Repetir_Contrasena_Registro').val();
            var parametro = {
                'nombre': nombre,
                'cedula': cedula,
                'telefono': telefono,
                //'email': email,
                'contrasena': contrasena,
                'repetirContrasena': repetirContrasena
            };
            var strParametro = JSON.stringify(parametro);

            $.ajax({
                type: "POST",
                url: "wbfrm_Login_Aux.aspx/ingresoRegistro",
                data: strParametro,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                success: function (res) {
                    if (res.d == "Ingreso Correcto") {
                        smoke.alert(res.d, function (e) {
                        }, {
                            ok: "OK",
                            classname: "custom-class"
                        });
                    }
                    else {
                        smoke.alert(res.d, function (e) {

                        }, {
                            ok: "OK",
                            classname: "custom-class"
                        });
                        var boton = document.getElementById('btnSubmit');
                        boton.click();
                    }
                    var boton = document.getElementById('btnSubmit');
                    boton.click();
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus + ": " + XMLHttpRequest.responseText);
                }
            });
        }

        function recuperacionContrasena() {
            
            var usuario = $('#txt_Usuario_Recuperacion').val();
            var parametro = { 'usuario': usuario };
            var strParametro = JSON.stringify(parametro);
            ShowProgress();
            $.ajax({
                type: "POST",
                url: "wbfrm_Login_Aux.aspx/recuperacionDeContrasena",
                data: strParametro,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                success: function (res) {
                    if (res.d == "wbfrm_Index.aspx") {
                        window.location = "wbfrm_Index.aspx";
                    }
                    else {
                        smoke.confirm(res.d, function (e) {
                        }, {
                            ok: "OK" ,
                            classname: "custom-class"
                        });
                        var boton = document.getElementById('btnSubmit');
                        boton.click();
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus + ": " + XMLHttpRequest.responseText);
                }
            });
        }

        function solicitudDesbloqueo() {

            var usuario = $('#txt_Usuario_Recuperacion').val();
            var parametro = { 'usuario': usuario };
            var strParametro = JSON.stringify(parametro);
            ShowProgress();
            $.ajax({
                type: "POST",
                url: "wbfrm_Login_Aux.aspx/solicitudDesbloqueo",
                data: strParametro,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                success: function (res) {
                    if (res.d == "wbfrm_Index.aspx") {
                        window.location = "wbfrm_Index.aspx";
                    }
                    else {
                        smoke.confirm(res.d, function (e) {
                        }, {
                            ok: "OK",
                            classname: "custom-class"
                        });
                        var boton = document.getElementById('btnSubmit');
                        boton.click();
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus + ": " + XMLHttpRequest.responseText);
                }
            });
        }

        function soloNumeros(e) {
            var keynum = window.event ? window.event.keyCode : e.which;
            if ((keynum == 8) || (keynum == 46))
                return true;
            return /\d/.test(String.fromCharCode(keynum));
        }

        function soloLetras(e) {
            tecla = (document.all) ? e.keyCode : e.which;
            if (tecla == 8) return true;
            patron = /[A-Za-z]/;
            te = String.fromCharCode(tecla);
            return patron.test(te);
        }
    </script>
</body>
</html>
